<template>
  <div>
      <div class="num">
          <img src="http://www.wailian.work/images/2018/07/29/2xd2007.png">
          <span>碎片 x</span><span style="margin-left:150rpx;color:#EB6D60">1</span>
      </div>
      <div class="f1"></div>
      <div class="ka">
          <div class="content" :data-type="type"  @touchstart="touchStart($event)" @touchend="touchEnd($event)">
            <div class="ka1">
                <img src="http://www.wailian.work/images/2018/07/29/72x.png">
            </div>
            <div class="ka2">
                <img src="http://www.wailian.work/images/2018/07/29/72x.png">
            </div>
            <div class="ka3">
                <img src="http://www.wailian.work/images/2018/07/29/72x.png">
            </div>
          </div>
      </div>
      <div class="ff">
          <div class="f2"></div>
          <div class="img">
            <img src="http://www.wailian.work/images/2018/07/29/icon2x36aa1.png">
            <span>14</span>
          </div>
          <div class="f3"></div>
      </div>
      <div class="userOrNo">
        <div class="userButton">
            <img @click="buy" src="http://www.wailian.work/images/2018/07/29/2x0fadc.png">
        </div>
      </div>
      <div class="time">
        <div class="userTime">
           剩余29小时有效
        </div>
      </div>
      <div class="rhead">
          <div class="rl"></div>
          <div class="rt">使用规则</div>
          <div class="rr"></div>
      </div>
      <div class="rules">
        <div class="rcontent">
          ①每张优惠劵都有独立的编码<br>
          ②优惠劵不可重复兑换<br>
          ③优惠劵在兑换成功之后的48小时有效
        </div>
      </div>
  </div>
</template>

<script>

export default {
  components: {
   
  },

  data () {
    return {
      startX:'',
      endX:'',
      type:1
    }
  },
  methods:{
    touchStart(e){
         this.startX = e.mp.changedTouches[0].clientX;
    },
    touchEnd(e){
        // 获取滑动父级元素
            this.endX = e.mp.changedTouches[0].clientX;  
            // 左滑
            if(this.startX-this.endX > 10){
                if(this.type==0){
                 this.type = 1
               }
               else{
                 this.type = 2
               }
            
            }
            // 右滑
            else if(this.startX-this.endX < -10){
              if(this.type==2){
                 this.type = 1
               }
               else{
                 this.type = 0
               }
            }
    },
    buy(){
      console.log("yes");
    }
  },
  created () {
  
  }
}
</script>

<style lang="scss" scoped>
@import './shop';
</style>

